<template>
    <div>
        <div><input type="file" @change="uploadFile"></div>
        <div class="prog-wrap">
            <div class="text">{{progVal}}%</div>
            <div class="proging" :style="{width:progVal+'%'}"></div>
        </div>
        <div>图片预览：<img :src="showImage" alt=""></div>
    </div>
</template>

<script>
    import Axios from "axios";
    import {request} from "../../assets/js/utils/request";
  export default {
    name: 'uploadfile',
    data(){
      return {
        progVal:0,
        showImage:""
      }
    },
    methods:{
      uploadFile(e){
        // console.log(e.target.files[0]);
        let file=e.target.files[0];
        let formData=new FormData();
        formData.append("headfile",file);
        let config = {
          onUploadProgress: (progressEvent)=> {
            let percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
            // console.log(percentCompleted);
            this.progVal=percentCompleted;
          }
        };
        // Axios.post(this.$config.baseApi+"/user/myinfo/formdatahead?token="+this.$config.token,formData,config).then(res=>{
        //     if(res.data.code==200){
        //       this.showImage="http://vueshop.glbuys.com/userfiles/head/"+res.data.data.msbox;
        //     }
        // })
        // this.$request({
        //   url:"/user/myinfo/formdatahead?token="+this.$config.token,
        //   data:{headfile:file},
        //   method:"file",
        //   ...config
        // }).then(res=>{
        //   if(res.code==200){
        //       this.showImage="http://vueshop.glbuys.com/userfiles/head/"+res.data.msbox;
        //     }
        // })
        request(this.$config.baseApi+"/user/myinfo/formdatahead?token="+this.$config.token,"file",{headfile:file},config).then(res=>{
          if(res.code==200){
              this.showImage="http://vueshop.glbuys.com/userfiles/head/"+res.data.msbox;
            }
        })
      }
    }
  };
</script>

<style scoped>
    .prog-wrap{width:300px;height:40px;border:1px solid #EFEFEF;position: relative}
    .prog-wrap .text{position: absolute;left:50%;top:50%;transform: translate(-50%,-50%);font-size:14px;}
    .proging{width:0%;height:100%;background-color: #42b983;}
</style>
